﻿<common:LayoutAwarePage x:Name="pageRoot"
                        x:Class="FantasyWereld.Views.GroupDetailPage"
                        DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
                        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                        xmlns:local="using:FantasyWereld"
                        xmlns:data="using:FantasyWereld.Data"
                        xmlns:common="using:FantasyWereld.Common"
                        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                        mc:Ignorable="d"
                        NavigationCacheMode="Enabled">

    <Page.Resources>

        <!-- Collection of items displayed by this page -->
        <CollectionViewSource x:Name="itemsViewSource"
                              Source="{Binding Items}"
                              d:Source="{Binding AllGroups[0].Items, Source={d:DesignInstance Type=data:SampleDataSource, IsDesignTimeCreatable=True}}" />

        <common:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />

        <Storyboard x:Name="FadeOpacity"
                    RepeatBehavior="1x">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)"
                                           Storyboard.TargetName="BackGroundImage">
                <EasingDoubleKeyFrame KeyTime="0"
                                      Value="1" />
                <EasingDoubleKeyFrame KeyTime="0:0:2"
                                      Value="0.45">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <SineEase EasingMode="EaseInOut" />
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>

    </Page.Resources>

    <Page.BottomAppBar>
        <AppBar x:Name="PageAppBar"
                Padding="10,0,10,0">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="100*" />
                    <ColumnDefinition Width="50*" />
                </Grid.ColumnDefinitions>
                <StackPanel x:Name="LeftCommands"
                            Orientation="Horizontal"
                            Grid.Column="0"
                            HorizontalAlignment="Left">
                </StackPanel>
                <StackPanel x:Name="RightCommands"
                            Orientation="Horizontal"
                            Grid.Column="1"
                            HorizontalAlignment="Right">
                    <Button x:Name="BrowseToSiteButton"
                            HorizontalAlignment="Left"
                            Style="{StaticResource GlobeAppBarButtonStyle}"
                            Click="OnBrowseToSiteButtonClicked" />
                    <Button x:Name="BrowseToForumButton"
                            HorizontalAlignment="Left"
                            Style="{StaticResource CommentAppBarButtonStyle}"
                            Click="OnBrowseToForumButtonClicked" />
                    <Button x:Name="BrowsetoFacebookButton"
                            HorizontalAlignment="Left"
                            Style="{StaticResource ShareAppBarButtonStyle}"
                            Click="OnBrowseToFacebookButtonClicked" />
                </StackPanel>
            </Grid>
        </AppBar>
    </Page.BottomAppBar>

    <!--
        This grid acts as a root panel for the page that defines two rows:
        * Row 0 contains the back button and page title
        * Row 1 contains the rest of the page layout
    -->
    <Grid Style="{StaticResource LayoutRootStyle}"
          DataContext="{Binding Group}"
          d:DataContext="{Binding AllGroups[0], Source={d:DesignInstance Type=data:SampleDataSource, IsDesignTimeCreatable=True}}">

        <Grid.RowDefinitions>
            <RowDefinition Height="140" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <!-- Horizontal scrolling grid used in most view states -->
        <Image x:Name="BackGroundImage"
               Grid.RowSpan="2"
               Source="/Images/achtergrond.png"
               Stretch="UniformToFill" />

        <!-- Horizontal scrolling grid used in most view states -->
        <GridView x:Name="itemGridView"
                  AutomationProperties.AutomationId="ItemGridView"
                  AutomationProperties.Name="Items In Group"
                  TabIndex="1"
                  Grid.RowSpan="2"
                  Padding="120,139,120,50"
                  ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
                  SelectionMode="None"
                  IsSwipeEnabled="false"
                  IsItemClickEnabled="True"
                  ItemClick="ItemView_ItemClick">

            <GridView.Header>
                <StackPanel Width="400"
                            Margin="0,2,0,0">
                    <Image Source="{Binding Image}"
                           Height="500"
                           Width="400"
                           Stretch="UniformToFill"
                           AutomationProperties.Name="{Binding Title}" />
                </StackPanel>
            </GridView.Header>
            <GridView.ItemTemplate>
                <DataTemplate>
                    <Grid Height="225"
                          Width="480">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}"
                                Width="150"
                                Height="225"
                                BorderBrush="Black"
                                BorderThickness="1">
                            <Image Source="{Binding Image}"
                                   Stretch="UniformToFill"
                                   AutomationProperties.Name="{Binding Title}" />
                        </Border>
                        <StackPanel VerticalAlignment="Top"
                                    HorizontalAlignment="Left">
                            <Image Source="/Assets/Recent.png"
                                   Stretch="None"
                                   Visibility="{Binding ShowRecent, Converter={StaticResource BooleanToVisibilityConverter}}" />
                        </StackPanel>
                        <StackPanel VerticalAlignment="Top"
                                    HorizontalAlignment="Left">
                            <Image Source="/Assets/Nieuw.png"
                                   Stretch="None"
                                   Visibility="{Binding ShowNew, Converter={StaticResource BooleanToVisibilityConverter}}" />
                        </StackPanel>
                        <StackPanel Grid.Column="1"
                                    VerticalAlignment="Top"
                                    Margin="10,0,0,0">
                            <TextBlock Text="{Binding Title}"
                                       Style="{StaticResource TitleTextStyle}"
                                       TextWrapping="NoWrap" />
                            <TextBlock Text="{Binding Description}"
                                       Style="{StaticResource BodyTextStyle}" />
                        </StackPanel>
                    </Grid>
                </DataTemplate>
            </GridView.ItemTemplate>
            <GridView.ItemContainerStyle>
                <Style TargetType="FrameworkElement">
                    <Setter Property="Margin"
                            Value="52,0,0,10" />
                </Style>
            </GridView.ItemContainerStyle>
        </GridView>

        <!-- Vertical scrolling list only used when snapped -->
        <ListView x:Name="itemListView"
                  AutomationProperties.AutomationId="ItemListView"
                  AutomationProperties.Name="Items In Group"
                  TabIndex="1"
                  Grid.Row="1"
                  Visibility="Collapsed"
                  Padding="10,0,0,60"
                  ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
                  SelectionMode="None"
                  IsSwipeEnabled="false"
                  IsItemClickEnabled="True"
                  ItemClick="ItemView_ItemClick">

            <ListView.Header>
                <StackPanel>
                    <Image Source="{Binding Image}"
                           Margin="10,0,18,0"
                           Stretch="UniformToFill"
                           AutomationProperties.Name="{Binding Title}" />
                </StackPanel>
            </ListView.Header>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <Grid Margin="6">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}"
                                Width="60"
                                BorderBrush="Black"
                                BorderThickness="1">
                            <Image Source="{Binding Image}"
                                   Stretch="UniformToFill" />
                        </Border>
                        <StackPanel VerticalAlignment="Top"
                                    HorizontalAlignment="Left">
                            <Image Source="/Assets/Recent.png"
                                   Stretch="None"
                                   Visibility="{Binding ShowRecent, Converter={StaticResource BooleanToVisibilityConverter}}" />
                        </StackPanel>
                        <StackPanel VerticalAlignment="Top"
                                    HorizontalAlignment="Left">
                            <Image Source="/Assets/Nieuw.png"
                                   Stretch="None"
                                   Visibility="{Binding ShowNew, Converter={StaticResource BooleanToVisibilityConverter}}" />
                        </StackPanel>
                        <StackPanel Grid.Column="1"
                                    Margin="10,0,0,0">
                            <TextBlock Text="{Binding Title}"
                                       Style="{StaticResource ItemTextStyle}"
                                       TextWrapping="Wrap" />
                            <TextBlock Text="{Binding Author}"
                                       Style="{StaticResource BodyTextStyle}"
                                       TextWrapping="Wrap" />
                        </StackPanel>
                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

        <!-- Back button and page title -->
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Button x:Name="backButton"
                    Click="GoBack"
                    IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}"
                    Style="{StaticResource BackButtonStyle}" />
            <TextBlock x:Name="pageTitle"
                       Text="{Binding Title}"
                       Style="{StaticResource PageHeaderTextStyle}"
                       Grid.Column="1"
                       IsHitTestVisible="false" />
            <!-- SearchBox Control that provides suggestions to the user, focus given to control by keybaord by FocusOnKeyboardInput being set to true -->
            <SearchBox x:Name="SearchBox"
                       x:Uid="SearchBox"
                       Grid.Column="1"
                       Height="35"
                       Width="35"
                       HorizontalAlignment="Right"
                       VerticalAlignment="Center"
                       Margin="0 0 20 0"
                       SearchHistoryEnabled="True"
                       PlaceholderText="Doorzoek FantasyWereld" 
                       GotFocus="SearchBox_GotFocus"
                       LostFocus="SearchBox_LostFocus"
                       SuggestionsRequested="SearchBoxEventsSuggestionsRequested"
                       QuerySubmitted="SearchBoxEventsQuerySubmitted"
                       FocusOnKeyboardInput="True" />
        </Grid>

        <VisualStateManager.VisualStateGroups>

            <!-- Visual states reflect the application's view state -->
            <VisualStateGroup x:Name="ApplicationViewStates">
                <VisualState x:Name="FullScreenLandscape" />
                <VisualState x:Name="Filled" />

                <!-- The entire page respects the narrower 100-pixel margin convention for portrait -->
                <VisualState x:Name="FullScreenPortrait">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton"
                                                       Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{StaticResource PortraitBackButtonStyle}" />
                        </ObjectAnimationUsingKeyFrames>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridView"
                                                       Storyboard.TargetProperty="Padding">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="100,126,90,0" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>

                <!--
                    The back button and title have different styles when snapped, and the list representation is substituted
                    for the grid displayed in all other view states
                -->
                <VisualState x:Name="Snapped">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton"
                                                       Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{StaticResource SnappedBackButtonStyle}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle"
                                                       Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{StaticResource SnappedPageHeaderTextStyle}" />
                        </ObjectAnimationUsingKeyFrames>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridView"
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="Collapsed" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemListView"
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="Visible" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</common:LayoutAwarePage>
